<template>
  <v-chart class="circular" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default defineComponent({
  name: "Circular",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "dark",
  },
  setup: () => {
    const option = ref({
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "0%",
        left: "center",
        textStyle: {
          //图例文字的样式
          color: "#ccc",
          fontSize: 14,
        },
      },
      textStyle: {
        color: "red",
      },
      series: [
        {
          //   name: "访问来源",
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 100, name: "端口漏洞", itemStyle: { color: "#74D1F5" } },
            { value: 150, name: "数据库漏洞", itemStyle: { color: "#3BA4F5" } },
            { value: 150, name: "文件漏洞", itemStyle: { color: "#0A6FF5" } },
          ]
        },
      ],
      backgroundColor:"transparent"
    });

    return { option };
  },
});
</script>

<style lang="less" scoped>
.circular {
  width: 100%;
  height: 100%;
}
</style>
